<!-- 列表 -->
<template>
    <div class="list">
        <van-sidebar v-model="activeKey" @change="onChange" class="list_tit">
            <van-sidebar-item title="热门推荐" />
            <van-sidebar-item title="鲜花" />
            <van-sidebar-item title="永生花" />
            <van-sidebar-item title="蛋糕" />
            <van-sidebar-item title="特色礼品" />
            <van-sidebar-item title="礼篮" />
            <van-sidebar-item title="绿植花卉" />
        </van-sidebar>
        <div class="com">
            <img :src="list.titImg" alt="" class="com_img">
            <div class="com_list" v-for="item in list.list" :key="list.tit">
                <div class="tit" v-if="item.tit">
                    <p class="title">{{ item.tit }}</p>
                    <p class="tit_text" v-if="item.text"><i class="iconfont">&#xe705;</i>鲜花排行榜</p>
                </div>
                <ul class="com_list_ul">
                    <li class="com_item" v-for="el,index in item.data" :key="el.index">
                        <img :src="el.img" alt="" v-if="el.img" :class="{item_img : !el.text }">
                        <p :class="{item_p : !el.img }">{{ el.text }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "list",
    data() {
        return {
            activeKey: 0,
            list: {}//数据
        };
    },
    methods: {
        onChange(index) {
            this.ajaxs(index)
        },
        ajaxs(index) {
            this.$axios.get('/api/listCate').then(res => {
                this.list = res.data.data[index]
            })
        }
    },
    created() {
        this.activeKey=this.$route.query.index
        if(this.activeKey==undefined){this.activeKey=0}
        this.ajaxs(this.activeKey)
    }
}
</script>
<style scoped lang='less'>
.list {
    height: calc( 100vh - 1rem);
    display: flex;
    background: #fff;
}

.list_tit {
    height: 100%;
    border-right: 1px solid #ddd;

}

.van-sidebar-item {
    background: #fff;
}

.com {
    flex: 1;
    box-sizing: border-box;
    padding: .24rem .2rem .88rem;
    overflow-y: auto;
    .com_img {
        width: 5.44rem;
        height: 1.96rem;
        margin-bottom: .24rem;
    }

    ;

    .com_list {
        padding: .16rem .08rem;
        margin-bottom: .24rem;

        .tit {
            padding: 0 .24rem;
            margin-bottom: .24rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tit_text {
                font-size: .08rem;
                color: #999;

                i {
                    font-size: .1rem;
                }
            }
        }

        ;

        .com_list_ul {
            display: flex;
            justify-content: flex-start;
            padding: 0 .1rem;
            flex-wrap: wrap;
            border-bottom: 1px solid #ddd;
            padding-bottom:.2rem;
            .com_item {
                width: 33.33%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: .16rem 0;

                img {
                    width: 1.12rem;
                    height: 1.12rem;
                };
                .item_img{
                    width:1.44rem;
                    height:.8rem;
                }

                ;

                p {
                    margin: .16rem .16rem 0;
                    text-align: center;
                    font-size: .08rem;
                };
                .item_p{
                    width:1.44rem;
                    height:.72rem;
                    background:#F7F9FA;
                    line-height:.72rem;
                }
            }
        }
    }
}
</style>